<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 插槽作用域</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <component1 v-slot:default="slot1">{{slot1.obj.username}}</component1>
    <component1 v-slot="slot2">{{slot2.obj.username}}</component1>
    <component1 #slot="slot3">{{slot3.obj.username}}</component1>
</div>

<template id="component1">
    <div>
        <slot v-bind:obj="obj"></slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const demo = new Vue({
        el: '#app',
        data: {
        },
        components: {
            'component1' : {
                template : '#component1',
                data(){
                    return{
                        obj : {
                            username : '张三',
                            password : 123456,
                        },
                    }
                }
            }
        },
    });
</script>
</body>
</html>